// @ts-nocheck
import 'lib-flexible';
import './showEvalate.less';
import '@/pages/golobo.less';
import React, { Fragment, useEffect, useState } from 'react';
import server from '@/utlis/server';
import { Edit } from '@react-vant/icons';
import { history, useLocation } from 'umi';
import { NavBar, Button, Image } from 'react-vant';
import { Rate, ProgressBar, Toast } from 'antd-mobile';
import jwtDecode from 'jwt-decode';
export default function showEvalate() {
  const location = useLocation();
  let [isshow, steshow] = useState(true);
  let [pinldata, setpinldata] = useState([]);
  // 展示星星
  let forma = (num) => {
    let newarr = [];
    for (let i = 1; i <= num; i++) {
      newarr.push(i);
    }
    let arr = newarr.sort((a, b) => {
      return b - a;
    });

    return arr.map((item, index) => {
      return (
        <Fragment key={index}>
          <Rate readOnly allowHalf value={item}></Rate>
        </Fragment>
      );
    });
  };
  let [score, setscore] = useState(0);
  // 进度条数值
  let [ProgressBarnum1, setProgressBarnum1] = useState(0);

  let [ProgressBarnum2, setProgressBarnum2] = useState(0);
  let [ProgressBarnum3, setProgressBarnum3] = useState(0);
  let [ProgressBarnum4, setProgressBarnum4] = useState(0);
  let [ProgressBarnum5, setProgressBarnum5] = useState(0);
  let getpl = async () => {
    let { data } = await server.get('/yancup/getpc', {
      params: {
        per_id: location.state.state._id,
      },
    });
    isinok(data.data);
    setpinldata(data.data);
    readaa(data.data);
  };
  let isinok = (data) => {
    let token = localStorage.getItem('token');
    if (token) {
      let user = jwtDecode(token)._doc;

      let ins = data.filter((item) => {
        return item.user_id._id == user._id;
      });

      if (ins.length != 0) {
        steshow(false);
      } else {
        steshow(true);
      }
    }
  };
  let readaa = (data) => {
    let index1 = 0;
    let index2 = 0;
    let index3 = 0;
    let index4 = 0;
    let index5 = 0;
    let num = 0;
    data.forEach((item) => {
      // console.log(item);
      num += item.num;
      if (item.num == 2) {
        index2 += 1;
      } else if (item.num == 1) {
        index1 += 1;
      } else if (item.num == 3) {
        index3 += 1;
      } else if (item.num == 4) {
        index4 += 1;
      } else {
        index5 += 1;
      }
    });
    setProgressBarnum1(index1 * 10);
    setProgressBarnum2(index2 * 10);
    setProgressBarnum3(index3 * 10);
    setProgressBarnum4(index4 * 10);
    setProgressBarnum5(index5 * 10);
    let average = ((num / data.length) * 2).toFixed(1);

    setscore(average);
  };

  useEffect(() => {
    getpl();
  }, []);
  // 图片示例
  const src = 'https://img.yzcdn.cn/vant/cat.jpeg';
  return (
    <div className="aaaa">
      <div className="SE-navbar">
        <NavBar
          title={location.state.state.name}
          onClickLeft={() =>
            history.push({
              pathname: '/showdetail',
              state: { state: location.state.state },
            })
          }
        />
      </div>
      <div className="pingfenaa">
        <div className="pingfenaa-left">
          <h3>{score}超棒</h3>
          <p>{pinldata.length}人评分</p>
        </div>
        <div className="pingfenaa-right">
          <div className="playnuma">
            <div className="playnumreata">
              <div className="xinxina">{forma(5)}</div>
              <div className="playjidua">
                <ProgressBar percent={ProgressBarnum5} rounded={true} />
                <ProgressBar percent={ProgressBarnum4} rounded={true} />
                <ProgressBar percent={ProgressBarnum3} rounded={true} />
                <ProgressBar percent={ProgressBarnum2} rounded={true} />
                <ProgressBar percent={ProgressBarnum1} rounded={true} />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="showheian"></div>
      <div className="pinglun-num">
        <Button round color="linear-gradient(to right, #ff6034, #ee0a24)">
          全部{pinldata.length}
        </Button>
      </div>
      <hr />
      {pinldata.map((item) => {
        return (
          <div className="pingjia-xuan" key={item._id}>
            <div className="pjx-top">
              <div className="pjx-topl">
                <Image round fit={'cover'} src={item.user_id.img} />
              </div>
              <div className="pjx-topr">
                <h4>{item.user_id.username}</h4>
                <p>
                  2023.05.29 <span>河北</span>
                </p>
              </div>
            </div>
            <div className="pjx-bottom">
              <div className="df">
                打分
                <Rate allowHalf value={item.num} />
              </div>
              <p>{item.context}</p>
            </div>
            <hr />
          </div>
        );
      })}
      <div
        className="write-pl"
        style={{
          display: isshow ? 'block' : 'none',
        }}
        onClick={() => {
          history.push({
            pathname: '/writereview',
            state: { state: location.state.state },
          });
        }}
      >
        <Button round color="linear-gradient(to right, #ff6034, #ee0a24)">
          <Edit fontSize={'0.7rem'} />
          <p>写评论</p>
        </Button>
      </div>
    </div>
  );
}
